class DisplayElement{
    _display;
    constructor(elem,visable) {
        if(elem instanceof HTMLElement){
            this.elem=elem;
        }else if(typeof(elem) === 'string'){
            this.elem=document.querySelector(elem);
        }else{
            throw "非法的元素对象";
        }

        if(visable != undefined){
            this.visable=visable;
        }

    }

    addEventListener(eventName,listener){
        this.elem.addEventListener(eventName,e=>{
            if(this.visable){
                listener.call(this.elem,e);
            }
        });
    }

    set visable(visable){
        if(!visable){
            this._display=this.elem.style.display;
            this.elem.style.display='none';
        }else{
            this.elem.style.display=this._display;
        }
        this.elem.hidden=!visable;

    }

    get visable(){
        return !this.elem.hidden;
    }
}

class DirList {
    history = [];
    listeners = [];

    constructor(elem) {
        this.elem = elem;
        this.render();
    }

    get(id) {
        for (let historyElement of this.history) {
            if (historyElement.id == id) {
                return historyElement;
            }
        }
        return null;
    }

    addListener(listener) {
        this.listeners.push(listener);
    }

    push(id, pid, name) {
        this.history.push({id, pid, name});
        this.render();
    }

    clear() {
        this.history.length = 0;
        this.render();
    }

    pop(pid) {
        try {
            // [1,2,3,4,5,6] = > [1,2]
            // [1,2,3]
            if (pid > 0 && this.history.length > 2) {
                if (this.history[this.history.length - 2].id == pid) {
                    this.history.pop();
                    return;
                }
                this.history.pop();
                this.pop(pid);
            }
            return this.history.pop();
        } finally {
            this.render();
        }
    }

    render() {
        if (this.history.length == 0) {
            this.elem.hidden = true;
        } else {
            this.elem.hidden = false;
        }
        this.elem.innerHTML = this.toString();
        let listeners = this.listeners;
        let elem=this.elem;
        layui.use(['element','jquery'], function () {
            let {element,$} = layui;
            element.init();
            $(elem).find("a").click(function (e) {
                for (let listener of listeners) {
                    listener.call(this,e);
                }
            });
        })
    }

    toString() {
        let html = '';
        for (let i = 0; i < this.history.length; i++) {
            if (i == this.history.length - 1) {
                html += `
                    <a ><cite>${this.history[i].name}</cite></a>
                `;
            } else {
                html += `
                    <a pid="${this.history[i].id}">${this.history[i].name}</a>
                    `;
            }
        }
        return html;
    }

}

function downFile(src) {
    let a = document.createElement("a");
    a.href=src;
    a.click();
}